<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Welcome to Vue</title>
  <!--<script src="https://unpkg.com/vue"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
  <div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>


  <div id="app-3">
    <p v-if="seen">现在你看到我了</p>
  </div>



  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>

  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
  </div>



  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>

  <div id="app-7">
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”，稍后再
        作详细解释。
      -->
      <todo-item
              v-for="item in groceryList"
              v-bind:todo="item"
              v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>


  <div id="app-8">
    <span v-once>这个将不会改变: {{ rawHtml }}</span>
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    <div v-bind:id="dynamicId">xxxxx</div>
    <button v-bind:disabled="isButtonDisabled">Button</button>

  </div>



  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>

    <p>Reversed abcdef: "{{ reversedabcde() }}"</p>
  </div>


  <div id="demo">{{ fullName }}</div>





  <div id="watch-example">
    <p>
      Ask a yes/no question:
      <input v-model="question">
    </p>
    <p>{{ answer }}</p>
  </div>




  <!--  @@@@@@@@@@@@@@script@@@@@@@@@@@@@@@@@@@@@@@@ -->
  <script>

    var watchExampleVM = new Vue({
      el: '#watch-example',
      data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
      },
      watch: {
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion, oldQuestion) {
          console.log(newQuestion,oldQuestion)
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        }
      },
      created: function () {
        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
        // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
        // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
        // 请参考：https://lodash.com/docs#debounce
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      },
      methods: {
        getAnswer: function () {
          if (this.question.indexOf('?') === -1) {
            this.answer = 'Questions usually contain a question mark. ;-)'
            return
          }
          this.answer = 'Thinking...'
          var vm = this
          axios.get('https://yesno.wtf/api')
                  .then(function (response) {
                    vm.answer = _.capitalize(response.data.answer)
                  })
                  .catch(function (error) {
                    vm.answer = 'Error! Could not reach the API. ' + error
                  })
        }
      }
    })









   /* var demo = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: ''
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
    })*/


    var demo = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: {
          // getter
          get: function () {
            return this.firstName + ' ' + this.lastName +",bbbb"
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
      }
    })

   // var demo = new Vue({
   //    el: '#demo',
   //    data: {
   //      firstName: 'Foo',
   //      lastName: 'Bar'
   //    },
   //    computed: {
   //      fullName: function () {
   //        return this.firstName + ' ' + this.lastName
   //      }
   //    }
   //  })




    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello',
        message2: 'abcdef'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        reversedabcde: function () {
          return this.message2.split('').reverse().join('')
        }
      }
    })


    var app6 = new Vue({
      el: '#app-8',
      data: {
        rawHtml: 'Hello Vue!',
        dynamicId:'ddddd',
        isButtonDisabled:false
      }
    })



    // ----------

    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
      el: '#app-7',
      data: {
        as:'aaaaaddd',
        groceryList: [
          { id: 8, text: '蔬菜' },
          { id: 3, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      },
      created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.as)
      }
    })

    //===================================


    var app6 = new Vue({
      el: '#app-6',
      data: {
        message: 'Hello Vue!'
      }
    })


    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })


    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
    })

    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })

    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })


  </script>
</body>
</html>
